<template>
  <div id="box">
    <header id="header">
        <i class="recommendIcon"></i>
        <span>药师推荐</span>
        <i class="recommendIcon"></i>
     
    </header>
    <main>
      <ul id="list">
        <li class="li" v-for="(item) in digi" :key="item.sn" @click="toDetail(item.id)">
          <div class="img">
            <img
              :src="item.image"
              alt
            />
          </div>
          <div class="title">{{item.fullname}}</div>
          <div class="price">
            <p class="prc">
              <span>￥{{item.price}}</span>
              <del>￥{{item.marketPrice}}</del>
            </p>
            <div class="car"></div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>
<script>
export default {
  data(){
    return {
      digi:[{
        "brandId": "8bcb7027270c8082c5aaf2f41e151694",
        "categoryId": "3aeddf3019dd08e0bb9457391e902032",
        "fullname": "白云山 枸橼酸西地那非片 50mg*1s",
        "id": "ed502e3b0bbcf7ab87c991db6074ac13",
        "image": "http://image.360hwj.com/goods/920638/0b0bce24-1c29-4b69-9d8f-ee74cd2f12fd!400x400.jpg",
        "marketPrice": "40.25",
        "price": "35",
        "sn": "1100014",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "1d6ebb67e6f8e9e3c04e7d26a9ec4585",
        "fullname": "汇群堂 汇群堂黄连 5g",
        "id": "18160a2fd6605c47ea5ee54bde84b883",
        "image": "http://image.360hwj.com/goods/932058/42c9358f-5cc4-4696-992d-6ee2c144ab05!400x400.jpg",
        "marketPrice": "1.76",
        "price": "1.53",
        "sn": "3011937",
        "type": "0"
    }, {
        "brandId": "ec99366875b79ecc235198a920414358",
        "categoryId": "d178c9ae0218376ae9f2842e1d438dfb",
        "fullname": "金历克 复方氨酚烷胺胶囊 10粒/板",
        "id": "26e77e828b56d1390223377d67767e59",
        "image": "http://image.360hwj.com/goods/930840/3a467614-57e6-4dd1-a51f-bc9b57e5a488!400x400.jpg",
        "marketPrice": "11.50",
        "price": "10",
        "sn": "2010436",
        "type": "0"
    }, {
        "brandId": "ee4f5b7ff7831ecc4c0bd222042a1ab7",
        "categoryId": "8b683e05c594be9321254cfc1706992e",
        "fullname": "金贝特令 金贝特令 维生素AD滴剂 24粒（A1800：D600）",
        "id": "2799031aea8474770064ee296ba94536",
        "image": "http://image.360hwj.com/goods/907977/660eb2f7-c60e-49a9-9f99-c32d2d2f1f79!400x400.jpg",
        "marketPrice": "15.52",
        "price": "13.5",
        "sn": "2170037",
        "type": "0"
    }, {
        "brandId": "b9a28dbdfab03f7c520461125ce379ad",
        "categoryId": "c2c90ac718bd443c1f2dc7042d6dd53a",
        "fullname": "步长 稳心颗粒 9g*9袋",
        "id": "696fcc93401aa647a53e6594ed2c6da6",
        "image": "http://image.360hwj.com/goods/901102/4a26fdb5-265c-4c8d-8841-81cdb3cce638!400x400.jpg",
        "marketPrice": "28.75",
        "price": "21",
        "sn": "1070051",
        "type": "0"
    }, {
        "brandId": "0018a7e4d9a35240e20f91344dda6c16",
        "categoryId": "43d34eccdcf1bc66dc67851a4f0b8223",
        "fullname": "曹清华 薏辛除湿止痛胶囊 0.3g*12粒*18板",
        "id": "0566b728e62055dec4515f1a465259cd",
        "image": "http://image.360hwj.com/goods/902602/55b1c9b3-5f39-4715-a765-cc680d199139!400x400.jpg",
        "marketPrice": "492.20",
        "price": "428",
        "sn": "2110001",
        "type": "0"
    }, {
        "brandId": "3dced7360a3365c2464094856074d653",
        "categoryId": "54d50310515af1ac2fcd1639bccb51a6",
        "fullname": "杜蕾斯 超薄 杜蕾斯避孕套 12s",
        "id": "0c88954d229d6e2dedc0bb3b93edff4a",
        "image": "http://image.360hwj.com/goods/920575/79010365-f891-485f-9aff-4a20f23e9937!400x400.jpg",
        "marketPrice": "66.70",
        "price": "58",
        "sn": "7020014",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "1d6ebb67e6f8e9e3c04e7d26a9ec4585",
        "fullname": "汇群堂 (汇群堂)桔梗片 5g",
        "id": "d17512e2740a0c6fb92e28bca92e55bd",
        "image": "http://image.360hwj.com/goods/931921/ee961611-6f98-4ac9-a2df-932b14e6db50!400x400.jpg",
        "marketPrice": "0.80",
        "price": "0.58",
        "sn": "3011814",
        "type": "0"
    }, {
        "brandId": "086c5baa1e0656c18e4380b32e94e29a",
        "categoryId": "69cf4c01027d7cfba092aca1332339b7",
        "fullname": "春梦 男宝胶囊 0.3g*12s",
        "id": "7098bb3970fc7dcae300b4816175bd5a",
        "image": "http://image.360hwj.com/goods/907079/75251d33-34e5-4ef9-a7f7-15085d288745!400x400.jpg",
        "marketPrice": "10.35",
        "price": "9",
        "sn": "1200002",
        "type": "0"
    }, {
        "brandId": "8bcb7027270c8082c5aaf2f41e151694",
        "categoryId": "c4e3af9c240abb07c3d54e7c31fcad18",
        "fullname": "白云山 达尔得 格列齐特片 80mg*60片",
        "id": "27b3bdce383b48a8a7932d611c1899ba",
        "image": "http://image.360hwj.com/goods/906246/9b981def-fba3-4afe-94c8-0f1ff75382cc!400x400.jpg",
        "marketPrice": "18.40",
        "price": "25",
        "sn": "1090059",
        "type": "0"
    }, {
        "brandId": "edf5232cc3d4b330d5cc24a0dbd47b0b",
        "categoryId": "6c1b624dc50fd0c07102aa84d7def5e0",
        "fullname": "康妇特 复方莪术油栓 50mg*6枚",
        "id": "99f53483f89ca96da3aaf8840be98c75",
        "image": "http://image.360hwj.com/goods/921815/b7c6be89-c8c9-4cfa-991c-fc582f75097f!400x400.jpg",
        "marketPrice": "29.90",
        "price": "26",
        "sn": "2160002",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "17507ece9d093fe71299c1384fa6eaa9",
        "fullname": "汇群堂 (汇群堂)木蝴蝶 5g",
        "id": "e0a8ed428f0bdc423d9cfa07970a02b8",
        "image": "http://image.360hwj.com/goods/932072/6757a48c-7e4b-44d3-8793-dd276d35b400!400x400.jpg",
        "marketPrice": "0.53",
        "price": "0.46",
        "sn": "3011951",
        "type": "0"
    }, {
        "brandId": "d44287f010d883c4b1af6e782c3e8ffa",
        "categoryId": "f589f4f2e80fce6f5fb40eacf24f4569",
        "fullname": "康乃格 早早孕检测试纸(卡) 1人份",
        "id": "ebd3280b2fa82d627117c0d1436c9d5f",
        "image": "http://image.360hwj.com/goods/M2387/3925c2ce-e0ec-4a0a-afa7-87ac2da308c2!400x400.jpg",
        "marketPrice": "11.27",
        "price": "9.8",
        "sn": "7020037",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "013884a64905d59b618abad762fb234a",
        "fullname": "汇群堂 (汇群堂)地骨皮 5g",
        "id": "de8ca1f165bb8ea34878daf32324d5af",
        "image": "http://image.360hwj.com/goods/932130/a7328e88-ebb0-429e-b773-bb98d1552199!400x400.jpg",
        "marketPrice": "0.93",
        "price": "0.81",
        "sn": "3012007",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "4865b9984d7013de94d48a18278b578e",
        "fullname": "汇群堂 (汇群堂)莪术 5g",
        "id": "19824010f8dc39cff968fccc3fb15dd2",
        "image": "http://image.360hwj.com/goods/932167/4f77a9d1-2774-43d9-bd0f-f8ac4ec97da9!400x400.jpg",
        "marketPrice": "0.57",
        "price": "0.42",
        "sn": "3012044",
        "type": "0"
    }, {
        "brandId": "12243dea09c92ffd5e8551b56fd93f8e",
        "categoryId": "183c0b5ab4206d3fc05e695dbf926867",
        "fullname": "澳美 奥络 夫西地酸乳膏 5g：0.1g",
        "id": "cd829c5bc18d873ef0fe0e0e4f9d7b96",
        "image": "http://image.360hwj.com/goods/941771/e817a6e5-c59e-464f-80c5-ad3b1bd4294f!400x400.jpg",
        "marketPrice": "13.80",
        "price": "12",
        "sn": "1220018",
        "type": "0"
    }, {
        "brandId": "947e8641e74aaa8f1e680f8c34a8f09b",
        "categoryId": "c00fa781d12c3d93555b51113245c449",
        "fullname": "百多邦 莫匹罗星软膏 5g：2%支",
        "id": "62fb9db9c9b7c1065b4be0d0f88e1d4e",
        "image": "http://image.360hwj.com/goods/907862/158114f4-d4a2-4aef-b476-c8d85983c8fa!400x400.jpg",
        "marketPrice": "16.10",
        "price": "14",
        "sn": "2220005",
        "type": "0"
    }, {
        "brandId": "c39e91656deea74308bfacf61c94c36f",
        "categoryId": "9e8edc5d020f1f637f018bc4ddd8159e",
        "fullname": "集冠堂 莲子 150g",
        "id": "d425b53f9fde350768f6dc92a6483a37",
        "image": "http://image.360hwj.com/goods/916396/159a7765-deef-4493-97cd-afc8a8c6d662!400x400.jpg",
        "marketPrice": "34.50",
        "price": "30",
        "sn": "5020285",
        "type": "0"
    }, {
        "brandId": "2fafd6fbeae01a6f081b0871f01bda52",
        "categoryId": "0c1e3da9bb5318fb5f32ef1fbe1ef29d",
        "fullname": "汇群堂 (汇群堂)瓜蒌 5g",
        "id": "76a9f8a19408432fcd5e2bab7e69bcc0",
        "image": "http://image.360hwj.com/goods/931974/3ce80bef-fcb9-40a2-a692-6ea740630740!400x400.jpg",
        "marketPrice": "0.46",
        "price": "0.4",
        "sn": "3011856",
        "type": "0"
    }, {
        "brandId": "d14e788d943aca95d6a3e47f3971d0df",
        "categoryId": "21fb3f45df11485f9981cbbed350ace1",
        "fullname": "拜耳 拜新同 硝苯地平控释片 30mg*7s",
        "id": "de4b4312b47d6ed597693f2b53de8ef9",
        "image": "http://image.360hwj.com/goods/904463/7f547ce4-f563-4e7c-845f-3101a191c82a!400x400.jpg",
        "marketPrice": "37.95",
        "price": "36",
        "sn": "1070060",
        "type": "0"
    }, {
        "brandId": "58011e4bbc485bf6019b4eff8e03fa1f",
        "categoryId": "79e9f9902ae87d1e105813437b95e17b",
        "fullname": "可乐必妥 左氧氟沙星滴眼液 5ml：24.4mg",
        "id": "4abd7b2763d4b9699f4b50aade1dfa9b",
        "image": "http://image.360hwj.com/goods/920288/88be4550-bd1c-456d-adce-76932fecf03c!400x400.jpg",
        "marketPrice": "34.50",
        "price": "30",
        "sn": "1150024",
        "type": "0"
    }, {
        "brandId": "1a619f2fb2c859f9afa99599304ae6bf",
        "categoryId": "378bcfd1839ca97e0f509cd8b15dd592",
        "fullname": "克咳 半夏止咳糖浆 100ml",
        "id": "4d9db525683dcaabbff2b63e58d202e9",
        "image": "http://image.360hwj.com/goods/907567/e509fa42-46d2-4a1b-9fcc-80dca46aa997!400x400.jpg",
        "marketPrice": "9.20",
        "price": "8",
        "sn": "2040064",
        "type": "0"
    }, {
        "brandId": "ca94a40d8327911ad0e21c0900564f12",
        "categoryId": "087eaf6bb047598301fbf075449e9928",
        "fullname": "迪巧 维D钙咀嚼片 60s",
        "id": "47ba9b493f4e24bfcdc58855f42df5d9",
        "image": "http://image.360hwj.com/goods/941910/b9440439-10cf-4079-9cf5-d262311554cd!400x400.jpg",
        "marketPrice": "45.42",
        "price": "39.5",
        "sn": "2170039",
        "type": "0"
    }, {
        "brandId": "3dced7360a3365c2464094856074d653",
        "categoryId": "54d50310515af1ac2fcd1639bccb51a6",
        "fullname": "杜蕾斯 LOVE大胆爱吧 天然胶乳橡胶避孕套 3s",
        "id": "5b11110217bfd65a0f13e76f86a8c285",
        "image": "http://image.360hwj.com/goods/920727/1d7d975d-a5fe-48aa-9ef1-6005b6dd8e16!400x400.jpg",
        "marketPrice": "17.25",
        "price": "15",
        "sn": "7020013",
        "type": "0"
    }]
    }
  },
  methods:{
    toDetail(id){
      this.$router.push({path:'/detail',query:{id:id}})
    }
  }
};
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}

#box {
  margin-bottom: .266667rem;
  .oraColor {
    color: #ff5722;
  }

  // height: 100%;
  #header {
    width: 100%;
    height: .426667rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .recommendIcon{
      display: inline-block;
      width: .173333rem;
      height: .12rem;
      line-height:.426667rem ;
      background: url(../images/recommend_icon.png) center no-repeat;
      background-size: contain;
    }
    span{
      font-size: .426667rem;
      display: inline-block;
      margin: 0 .373333rem;
    }
    
  }

  main {
    #list {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background: #f6f6f6;
      box-sizing: border-box;
      padding: 0.186667rem 0.186667rem 1.333333rem 0.186667rem;
      margin-top: .8rem;

      .li {
        width: 45%; //353px
        background: #fff;
        border-radius: 0.066667rem; //5px
        box-sizing: border-box;
        padding: 0.306667rem 0.186667rem; //23px 14px
        margin: 0.186667rem;
        // position: relative;

        .img {
          width: 85%;
          margin: 0 auto;

          img {
            display: block;
            width: 100%;
          }
        }

        .title {
          width: 100%;
          font-size: 0.32rem; //12px
          // line-height: .746667rem;
          // margin-bottom: 0.8rem; //8px
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-inline-box;
          -webkit-linr-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          width: 100%;
          height: 0.533333rem; //40px
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          margin-top: 0.625rem;
          position: relative;

          .prc {
            span {
              font-size: 0.346667rem;
              color: #ff5722;
            }

            del {
              color: #9e9e9e;
              font-size: 0.24rem;
            }
          }

          .car {
            width: 0.826667rem;
            height: 0.533333rem;
            background: url(../images/car_icon.png) center no-repeat;
            background-size: contain;
            cursor: pointer;
            position: absolute;
            // right: 0.186667rem;
            // bottom: 0.333333rem;
            right: .186667rem;
            top: 0;
          }
        }
      }
    }
  }
}
</style>